<template>
  <el-dialog
    v-model="visible"
    width="600px"
    :before-close="handleClose"
    class="unified-dialog job-stop-dialog"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="dialog-header">
        <div class="header-icon header-icon-warning">
          <el-icon><VideoPause /></el-icon>
        </div>
        <div class="header-content">
          <h3>停止作业</h3>
          <p>停止Flink作业运行</p>
        </div>
      </div>
    </template>
    <div class="stop-info">
      <el-alert
        title="停止作业"
        type="warning"
        :closable="false"
        show-icon
      >
        <template #default>
          <p>将停止作业：<strong>{{ job?.job_name }}</strong></p>
          <p>此操作将停止Flink作业的运行，请确认后继续。</p>
        </template>
      </el-alert>
    </div>
    
    <el-form
      ref="formRef"
      :model="form"
      label-width="100px"
      label-position="left"
      class="stop-form"
    >
      <el-form-item label="Flink环境">
        <el-select
          v-model="form.flink_env"
          placeholder="选择Flink环境"
          clearable
          filterable
          style="width: 100%"
          popper-class="batch-dialog-select-popper"
          :teleported="true"
        >
          <el-option
            v-for="env in environmentOptions"
            :key="env.value"
            :label="`${env.label} (${env.host}:${env.port})`"
            :value="env.value"
          />
        </el-select>
        <span class="form-tip">选择Flink环境，留空使用默认环境</span>
      </el-form-item>
      
      <el-form-item label="更新数据库">
        <el-switch
          v-model="form.update_db"
          active-text="是"
          inactive-text="否"
        />
        <span class="form-tip">更新监控状态标志和暂停监控，多环境场景建议关闭</span>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button 
          type="danger" 
          :loading="loading"
          @click="handleSubmit"
        >
          确定停止
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useJobsStore } from '@/stores/jobs'
import { useAppStore } from '@/stores/app'
import { useFlinkEnvStore } from '@/stores/flinkEnv'
import { ElMessage } from 'element-plus'
import { componentLogger } from '@/utils/logger'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  job: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const jobsStore = useJobsStore()
const appStore = useAppStore()
const flinkEnvStore = useFlinkEnvStore()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const formRef = ref()
const loading = ref(false)

// 环境选项
const environmentOptions = computed(() => flinkEnvStore.getEnvironmentOptions())

const form = ref({
  flink_env: '',
  update_db: false  // 默认不更新数据库
})

const handleClose = () => {
  visible.value = false
}

const handleSubmit = async () => {
  try {
    loading.value = true
    
    const options = {
      savepoint: false,
      max_retries: 3,
      retry_interval: 3,
      wait_for_stop: 5,
      flink_env: form.value.flink_env || undefined,
      update_db: form.value.update_db  // 传递数据库更新标志
    }
    
    await jobsStore.stopJob(props.job.job_name, options)
    
    ElMessage.success('作业停止成功')
    emit('success')
    handleClose()
  } catch (error) {
    componentLogger.error('停止作业失败:', error)
    ElMessage.error('停止作业失败: ' + (error.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

// 初始化表单
const initForm = () => {
  form.value = {
    flink_env: ''
  }
}

// 监听对话框显示状态
watch(visible, (newVal) => {
  if (newVal) {
    initForm()
  }
})

// 组件挂载时加载环境配置
onMounted(() => {
  flinkEnvStore.fetchFlinkEnvironments()
})
</script>

<style scoped>
/* 对话框已使用统一样式系统 (dialog-system.css) */

.stop-info {
  margin-bottom: 20px;
}

.stop-form {
  margin-top: 20px;
}

.form-tip {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 环境选项样式 */
.env-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.env-name {
  font-weight: 500;
  color: #303133;
}

.env-url {
  font-size: 12px;
  color: #909399;
}

/* 表单项样式优化 */
:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  color: #303133;
  font-weight: 600;
  font-size: 14px;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  border-color: #409eff;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
}

:deep(.el-button--warning) {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

:deep(.el-button--warning:hover) {
  background: linear-gradient(135deg, #f78989 0%, #f56c6c 100%);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
}
</style>
